<template>
    <div class="newlist-box">
       
        <van-list :immediate-check="false" v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
        <div class="newitem" v-for="item in Newlist" :key="item.id" :title="item"  @click="viewDetails(item.id)" >
            
            <div class="newleft">
                <div class="newText"> {{item.title}}</div>
                <div class="newAuthor">{{item.hint}}</div>
            </div>
                <div class="newright"><img :src="item.images" alt="">
                </div>
        </div>
        <Oldlist v-for="(item,i) in Oldlist" :key="i" :data="item"></Oldlist>
        </van-list>
    </div>
</template>

<script>
    import Oldlist from '../components/Oldlist.vue';
    
    export default {
        name:'Newslist',
        data() {
    return {
      Newlist: [],
      lastTime:'',
      Oldlist:[],
      loading: false,
      finished: false,
        }
    },

    components:{
        Oldlist,
    },

    created() {
      this.getNewlist();
    },


    methods: {
        // 获取最新的日报内容
        getNewlist(){
            this.axios({
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/stories/latest',

                

            }).then(result =>{
                
                this.Newlist = result.data.stories;
                this.lastTime= result.data.date;
                
                
            }).catch(err =>{
                
            })
        },

        viewDetails(id){
           
            this.$router.push({name: 'Details', params: {id}});
        },

         onLoad(){
             
             

            let timer = setTimeout(()=>{           
            


           this.axios({
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/stories/before/'+this.lastTime,

                

            }).then(result =>{
                this.lastTime= result.data.date;
                // this.Newlist =this.Newlist.concat(result.data.stories) 
                this.loading=false;
                
                this.Oldlist.push(result.data)
                

                // this.Oldlist = this.Oldlist.concat(result.data.stories);
               
                
            }).catch(err =>{
                
            })

            },500)

        },



  },


}
</script>

<style lang="less" scoped>
    
    .newitem{
        padding: 15px;
        height: 100px;
        padding: 10px 15px ;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    

    .newText{
        width: 260px; 
        
        font-size: 18px;
        
        text-overflow: ellipsis;
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 2; 
            overflow: hidden;
    }
    .newAuthor{
        height: 20px;
        font-size: 14px;
        margin-top: 5px;
    }

    .newright{
        width: 80px;
        height: 80px;
        background-color: cadetblue;
    }

    img{
        width: 100%;
        height: 100%;
    }
    .line-box{
         display: flex; 
        justify-content: space-between;
        align-items: center;
    }

</style>